import React from 'react';
import { Avatar, IconButton } from 'sq-ui';
import style from './style.styl';
import {Modal} from '../../../../ui-components';

class InvitedItem extends React.Component {
  constructor(props) {
    super(props);
    this.displayName = 'InvitedItem';
    this.state = {
      deleteModalShow: false,
      name: '',
    }
  }
  handleRemove = () => {
    this.setState({
      deleteModalShow: true,
      name: this.props.item.invitedUserProfile.fullName,
    });
  }
  deleteProject = () => {
    this.props.onRemove && this.props.onRemove(this.props.item);
    this.setState({
      deleteModalShow: false,
      name: '',
    });
  }
  render() {
    const {
      item,
      isManager,
      disabled
    } = this.props;
    const {
      status,
      invitedUserProfile: user = {},
    } = item;
    if(!status) return null;
    return (
      <div className={style['invited-item-box']}>
        <Avatar
          style={{ margin: '0 10px 0 20px' }}
          width={42}
          src={user.avatarUrl}
        />
        <div className={style['invited-item-name']}>{user.fullName}</div>
        <div className={style['invited-item-level']}>{isManager ? '您的主管' : ''}</div>
        {
          status === 3 && !isManager && !disabled ? 
          <IconButton
            icon="delete"
            size="18"
            className={style['invited-item-del']}
            onClick={this.handleRemove}
          /> : null
        }
        <Modal
          onRequestClose={() => this.setState({ deleteModalShow: false, name: '' })}
          active={this.state.deleteModalShow}
          actions={[
            'cancel',
            this.deleteProject
          ]}
          title="取消邀请"
        >
          <div>{`确定${this.props.isProjectTeam ? '删除' : '取消邀请'}${this.state.name}？`}</div>
        </Modal>
      </div>
    );
  }
}

export default InvitedItem;
